<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-19 16:54:43
-->
<!-- 新增好友 -->
<template>
  <div class="addNewFriends">
    <!-- 标题 -->
    <div class="pageTitle">菜单管理</div>
    <div class="queryBox">
      <div class="queryBoxLeft">
        <div class="queryItem">
          <div class="title">菜单名称:</div>
          <div class="content">
            <el-input v-model="prop.title" placeholder="请输入菜单名称"/>
          </div>
        </div>
      </div>
      <div class="queryBoxRight">
        <el-button type="primary" @click="init">查询</el-button>
        <el-button type="primary" @click="resetClick">重置</el-button>
        <el-button type="success" @click="addClick">新增</el-button>
      </div>
    </div>
    <div class="tableClass">
      <el-table ref="tableRef" :data="tableData" v-loading="loading" border
        row-key="id"
        :lazy="true"
        default-expand-all
        style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="title" label="内容名称" />
        <el-table-column prop="remark" label="内容描述" />
        <el-table-column label="状态">
          <template #default="scope">
            <template v-if="scope.row.status==1">启用</template>
            <template v-if="scope.row.status==2">停用</template>
          </template>
        </el-table-column>
        <el-table-column prop="create_admin" label="创建人" />
        <el-table-column label="创建时间 ">
          <template #default="scope">
            {{ scope.row.create_time }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="timedPagination">
      <el-pagination
        v-model:current-page="prop.page"
        v-model:page-size="prop.pageSize"
        :total="prop.total"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增or编辑分类 -->
    <el-dialog
      v-model="dialogVisible"
      width="600"
      :before-close="dialogClose"
      title="添加菜单"
      top="3vh"
    >
      <div class="dialogContent">
        <el-form :model="addPropForm" label-width="auto">
          <el-form-item label="菜单名称:">
            <el-input v-model="addPropForm.title" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="菜单状态:">
            <el-select v-model="addPropForm.status" clearable placeholder="请选择">
              <el-option
                label="启用"
                :value="1"/>
              <el-option
                label="禁用"
                :value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="父级菜单:">
            <el-select v-model="addPropForm.pid" clearable placeholder="请选择">
              <el-option
                label="一级菜单"
                :value="0"/>
              <el-option
                v-for="list of pidOption"
                :key="list.id"
                :label="list.title"
                :value="list.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="序号:">
            <el-input type="number" v-model="addPropForm.sort" placeholder="请输入序号" />
          </el-form-item>
          <el-form-item label="url地址:">
            <el-input v-model="addPropForm.href" placeholder="请输入url地址" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="saveFun()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from "@/api/api.js"
let prop = ref({
  status: '',
  title: '',
  create_time: '',
  create_admin: '',
  page: 1,
  limit: 10,
  total: 0
})
let loading = ref(false)
let tableData = ref([])
let pidOption = ref([])

// 查询商品
function init() {
  loading.value = true
  let obj = {
    pid: 0,
    // title: prop.value.title,
    // page: prop.value.page,
    // limit: prop.value.limit
  }
  postApi('/system.menu/index', obj).then(res => {
    loading.value = false
    res.data.forEach(element => {
      element.hasChildren = element.is_children==1?true:false
    })
    tableData.value = res.data
    pidOption.value = res.data
    // prop.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function loadTableFun(tree, treeNode, resolve){
  postApi('/system.menu/index', {
    pid: tree.id
  }).then(res => {
    const children = res.data
    // maps.value.set(tree.id, { tree, treeNode, children });
    resolve(children)
  }).catch(err => {
    loading.value = false
  })
}
function resetClick() { // 重置
  prop.value = {
    status: '',
    title: '',
    create_time: '',
    create_admin: '',
    page: 1,
    limit: 10,
    total: 0
  }
  init()
}
function handleCurrentChange(val){
  prop.value.page = val
  init()
}

// 新增商品
const tableRef = ref(null)
let dialogVisible = ref(false)
let addPropForm = ref({
  id: '',
  pid: 0,
  title: '',
  sort: '',
  status: '',
  href: ''
})

function addClick() {
  dialogVisible.value = true
  addPropForm.value = {
    id: '',
    pid: 0,
    title: '',
    sort: '',
    status: '',
    href: ''
  }
}
function editClick(row) {
  dialogVisible.value = true
  addPropForm.value = {
    id: row.id,
    pid: row.pid,
    title: row.title,
    href: row.href,
    sort: row.sort,
    status: row.status
  }
}
function deleteClick(row) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/system.menu/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        init()
      }
    })
  })
}
// 上传图片回传函数
function getImagesFun(row) {
  console.log(row)
  addPropForm.value.images = row
}
// 保存
function saveFun() {
  loading.value = true
  // let imagesTemp = []
  // addPropForm.value.images.forEach(element => {
  //   imagesTemp.push(element.url)
  // })
  if(addPropForm.value.id){
    let obj = {
      id: addPropForm.value.id || 0,
      pid: addPropForm.value.pid,
      title: addPropForm.value.title,
      href: addPropForm.value.href,
      sort: addPropForm.value.sort,
      status: addPropForm.value.status
    }
    console.log(obj)
    postApi('/system.menu/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        dialogVisible.value = false
        tableData.value = []
        init()
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      pid: addPropForm.value.pid || 0,
      title: addPropForm.value.title,
      href: addPropForm.value.href,
      sort: addPropForm.value.sort,
      status: addPropForm.value.status
    }
    console.log(obj)
    postApi('/system.menu/add', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        dialogVisible.value = false
        tableData.value = []
        init()
      }
    }).catch(err => {
      loading.value = false
    })
  }
}

// 关闭弹框
function dialogClose(params) {
  dialogVisible.value = false
}

onMounted(()=>{
  init()
})
</script>

<style lang="scss" scoped>
.addNewFriends{
  padding: 20px;
  height: 100vh;
  .classOption{
    display: flex;
    justify-content: space-between;
    .oneClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .twoClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .threeClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .list{
      cursor: pointer;
      padding: 0 13px;
      margin-bottom: 8px;
      height: 36px;
      background: #F6F6F6;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-icon{
        margin-left: 4px;
      }
      .deleteIco{
        cursor: pointer;
        margin-right: 4px;
      }
    }
    .active{
      background: #000000;
      border-radius: 4px 4px 4px 4px;
      color: #FFFFFF;
      .el-icon{
        color: #FFFFFF;
      }
      .deleteIco{
        color: #FFFFFF;
      }
    }
    .title{
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #BA9763;
      .el-icon{
        width: 36px;
        height: 36px;
        background: #F6F6F6;
        border-radius: 5px 5px 5px 5px;
        color: #666;
        font-size: 16px;
        margin-right: 4px;
      }
    }
    .addBut{
      height: 36px;
      line-height: 36px;
      text-align: center;
      display: block;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #F6F6F6;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }
  }
  .pageTitle{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
  .queryBox{
    background-color: #fff;
    border-radius: 12px;
    padding: 20px 20px 10px 20px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    .queryBoxLeft{
      width: calc(100% - 260px);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .queryItem{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        margin-right: 20px;
        .title{
          font-weight: 400;
          font-size: 14px;
          color: rgb(16, 16, 16);
          margin-right: 10px;
        }
        .content{
          min-width: 194px;
          background-color: rgb(245, 247, 255);
          border-radius: 4px;
          ::v-deep(.el-select__wrapper){
            background-color: transparent;
            box-shadow: 0 0 0;
          }
          ::v-deep(.el-input__wrapper){
            background-color: transparent;
            box-shadow: 0 0 0;
            .el-input__inner{
              text-align: left;
            }
          }

        }
      }
    }
    .queryBoxRight{
      width: 260px;
    }
  }
  .tableClass{
    margin-bottom: 20px;
  }
}
.dialogContent{
}
</style>
